<template>
    <view style="display: flex;flex-direction: column;background: #f3f3f3;height: 100vh;">
        <div style="display: flex;flex-direction: column;margin-top: 50rpx;align-items: center;">
            <div style="font-size: 55rpx;">注册账号</div>
        </div>
        <view style="display: flex;flex-direction: column;">
            <view style="width: 90%; margin: 30rpx;">
                <view style="margin-top: 20rpx;" class="x">
                    <view class="" style="width: 70%;">
                        <uni-easyinput v-model="from.code" prefixIcon="person" focus
                            placeholder="请输入验证码"></uni-easyinput>
                    </view>
                    <view class="spcz"
                        style="width: 30%; color: #ff393c;border: 1rpx solid #ececec;background: #ffffff;">
                        <view v-if="showText==true" class="send" @click="getCode">获取验证码</view>
                        <view v-else class="send">{{second}}秒后获取</view>
                    </view>
                </view>
                <view style="margin-top: 20rpx;">
                    <uni-easyinput v-model="from.username" prefixIcon="person" focus
                        placeholder="请输入用户名"></uni-easyinput>
                </view>
                <view style="margin-top: 20rpx;">
                    <uni-easyinput type="password" v-model="from.password" prefixIcon="locked" focus
                        placeholder="请输入密码"></uni-easyinput>
                </view>
                <view style="margin-top: 20rpx;">
                    <uni-easyinput type="password" v-model="from.password" prefixIcon="locked" focus
                        placeholder="请再次输入密码"></uni-easyinput>
                </view>
            </view>
        </view>
        <div style="width: 100%;display: flex;justify-content: center;">
            <div style="background-color: #ff5500;width: 50%;height: 100rpx;
           display: flex;align-items: center;justify-content: center;border-radius: 20rpx;
           color: #f3f3f3;width: 95%;" @click="hhh()">确定</div>
        </div>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                from: {},
                second: 60,
                showText: true,

            }
        },
        onLoad(obj) {
            console.log(obj.mobile)
            this.from.mobile = obj.mobile
            // 输入手机号码进到这个页面自动开始倒计时
            this.showText = false
            var interval = setInterval(() => {
                let times = --this.second
                this.second = times < 10 ? '0' + times : times //小于10秒补 0
            }, 1000)
            setTimeout(() => {
                clearInterval(interval)
                this.second = 60
                this.showText = true
            }, 60000)
        },
        methods: {
            hhh() {
                console.log(this.from)
                uni.request({
                    url: 'http://47.91.230.137:8086/wx/auth/register',
                    method: "POST",
                    data: this.from,
                    success: (res) => {
                        console.log(res)
                        const data = res.data
                        // debugger
                        if (data.errno == 0) {
                            uni.showToast({
                                title: '注册成功',
                            })
                            // 跳转页面
                            setTimeout(() => {
                                uni.navigateTo({
                                    url: '/pages/denglu/denglu'
                                })
                            }, 1000)
                            // 存储用户的数据到 token
                            uni.setStorageSync('user', data.data.token)
                        } else {
                            uni.showToast({
                                icon: 'none',
                                title: data.errmsg
                            })
                        }
                    }
                })
            },
            getCode() { //倒计时
                this.showText = false
                var interval = setInterval(() => {
                    let times = --this.second
                    this.second = times < 10 ? '0' + times : times //小于10秒补 0
                }, 1000)
                setTimeout(() => {
                    clearInterval(interval)
                    this.second = 60
                    this.showText = true
                }, 60000)
            },
            zhu() {

            },
            yan() {

            },

        }
    }
</script>

<style>
    /* 验证码-注册样式 */
    .zhuce {
        width: 680rpx;
        margin: auto;
        font-size: 30rpx;
        display: flex;
        /* 两边对齐 */
        justify-content: space-around;
        /* 盒子并排靠左 */
        flex-direction: row;
        /* 元素并排 */
        flex-wrap: nowrap;
        justify-content: space-between;
        margin: 20rpx;
    }

    /* 用户协议 */
    .propertyBox {
        width: 100%;
        display: flex;
        font-size: 26rpx;
        position: fixed;
        bottom: 50rpx;
        justify-content: center;
    }

    /* 头像样式 */
    .info_list1 {
        width: 150rpx;
        height: 150rpx;
        margin: 80rpx;
    }

    /* 忘记密码 */
    .wangji {
        width: 710rpx;
        display: flex;
        justify-content: flex-end;
        font-size: 25rpx;
        margin: 15rpx;
    }
</style>